<script lang="ts" setup>
import { addAddressAPI, updateAddressAPI } from '@/api/adress'
import options from '@/assets/address.json'
import { useAddressStore } from '@/stores/address'
import { Message } from '@arco-design/web-vue'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

const { addressList, isAdressModalShow, addressForm, statusName } = storeToRefs(useAddressStore())
const { getAddressList } = useAddressStore()

type AddressForm = {
  province: string
  city: string
  district: string
  address: string
  phone: string
  username: string
  area: any[]
}

// 省市区联动
const fieldNames = { value: 'name', label: 'name', children: 'areaList' }

const format = (options: any) => {
  const labels = options.map((option: any) => option.name)
  return labels.join('-')
}

const handleSubmitAdress = async () => {
  addressForm.value.province = addressForm.value.area[0]
  addressForm.value.city = addressForm.value.area[1]
  addressForm.value.district = addressForm.value.area[2]
  for (const key in addressForm.value) {
    if (!addressForm.value[key as keyof AddressForm]) {
      Message.error('请填写完整的数据')
      return
    }
  }

  if (statusName.value === '新增') {
    await addAddressAPI(addressForm.value)
    Message.success('添加地址成功！')
  } else {
    await updateAddressAPI(addressForm.value)
    Message.success('修改地址成功！')
  }

  await getAddressList()

  handleCancel()
  statusName.value = '新增'
}

const handleCancel = () => {
  isAdressModalShow.value = false
  addressForm.value = {
    province: '',
    city: '',
    district: '',
    address: '',
    phone: '',
    username: '',
    area: []
  }
}
</script>

<template>
  <a-modal v-model:visible="isAdressModalShow" mask simple :footer="false" width="540px">
    <template #title>
      <div class="w-full">
        <div class="text-right">
          <icon-close class="cursor-pointer" @click="handleCancel" />
        </div>
        <h2 class="text-center">{{ statusName }}地址</h2>
      </div>
    </template>

    <div class="px-10 h-120">
      <a-form :model="addressForm" class="w-full">
        <a-form-item field="username" label="收获人">
          <a-input size="large" class="text-left" v-model="addressForm.username" placeholder="请输入收货人" />
        </a-form-item>
        <a-form-item field="password" label="联系方式">
          <a-input size="large" class="text-left" v-model="addressForm.phone" placeholder="请输入联系方式" />
        </a-form-item>
        <a-form-item field="area" label="所在地区：">
          <a-cascader
            size="large"
            :options="options"
            v-model="addressForm.area"
            path-mode
            :field-names="fieldNames"
            placeholder="请选择地址"
            :format-label="format"
          />
        </a-form-item>
        <a-form-item field="area" label="详细地址">
          <a-input size="large" class="text-left" v-model="addressForm.address" placeholder="请输入详细地址" />
        </a-form-item>
        <a-button size="large" class="h-12 bg-primary! color-white! text-4! mt-4" @click="handleSubmitAdress">
          保存
        </a-button>
      </a-form>
    </div>
  </a-modal>
</template>

<style lang="scss" scoped>
:root {
  --main-color: #76a5af;
}
.custom-checkbox-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  border: 1px solid #76a5af;
  box-sizing: border-box;
}

.custom-checkbox-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.custom-checkbox-card-title {
  color: #76a5af;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.custom-checkbox-card:hover,
.custom-checkbox-card-checked,
.custom-checkbox-card:hover .custom-checkbox-card-mask,
.custom-checkbox-card-checked .custom-checkbox-card-mask {
  border-color: #76a5af;
}

.custom-checkbox-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-checkbox-card:hover .custom-checkbox-card-title,
.custom-checkbox-card-checked .custom-checkbox-card-title {
  color: #76a5af;
}

.custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
  background-color: #76a5af;
}

// 数字输入框
:deep(.arco-input-wrapper) {
  background-color: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}

:deep(.arco-input-wrapper.arco-input-focus) {
  background-color: #fff;
  border-color: rgb(118, 165, 175, 0.7);
}

:deep(.arco-input) {
  text-align: center;
  font-size: 16px;
}

:deep(.text-left .arco-input) {
  text-align: left;
}

// 文本域focus样式
:deep(.arco-textarea-focus) {
  border-color: #66afe9 !important;
}

// 照片墙样式
:deep(.arco-upload-picture-card) {
  width: 150px;
  height: 150px;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.3s ease;
}

.v-enter-from {
  transform: translateY(-100%);
}

.v-leave-to {
  transform: translateY(-100%);
}

:deep(.arco-input-wrapper) {
  background-color: white;
}

:deep(.arco-input-wrapper) {
  border-color: #ddd;
}

:deep(.arco-input-wrapper:hover) {
  background-color: #fff;
  border-color: #76a5af;
}

:deep(.arco-input-wrapper.arco-input-focus) {
  border-color: #76a5af;
}

:deep(.arco-input-search .arco-input-suffix) {
  font-size: 20px;
}

:deep(.arco-form-item-label-col) {
  width: 100px;
}

:deep(.arco-form-item-label) {
  width: 100px;
}

:deep(.arco-select-view-single) {
  background-color: white;
  border-color: #ddd;
}

:deep(.arco-select-view-focus) {
  border-color: #76a5af;
}
</style>
